<script setup>
import {onMounted, reactive, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/ajax";
import UploadComponent from "@/components/index/UploadComponent.vue";
import EditorComponent from "@/components/index/EditorComponent.vue";
import router from "@/router";
import {useRoute} from "vue-router";

const editData = reactive({
  id: null,
  name: "",
  content: "",
  price: "",
  image: "",
  productAttr: [],
  state: 1,
  change_number: 1
})
const rule = reactive({
  name: [
    {required: true, message: "请输入礼包名称", trigger: "blur"}
  ],
  price: [
    {required: true, message: "请输入礼包价值", trigger: "blur"},
    {
      validator: (rule, value, callback) => {
        if (isNaN(value) || parseFloat(value) < 0) return callback(new Error("请输入正确的价格"))
        callback()
      }
    }
  ]
})
const loading = ref(false)
const route = useRoute()
const upload_success = ({result}) => {
  editData.image = result.url
}
const updateCont = (dat) => {
  editData.content = dat
}
const form = ref()
const addAttr = () => {
  editData.productAttr.push({
    name: "",
    prices: "",
    sku: ""
  })
}
const savePack = refs => {
  refs.validate(err => {
    loading.value = err
    if (err) {
      $ajax.post(`${apiUrl}admin/pack_bag/save`, editData).then(() => {
        loading.value = false
        router.replace({name: 'pack'})
      }).catch(() => loading.value = false)
    }
  })
}
onMounted(() => {
  getPackage()
})
const getPackage = () => {
  if (route.params.id) {
    $ajax.get(`${apiUrl}admin/pack_bag/detail`, {params: {id: route.params.id}}).then(({data: {result}}) => {
      for (let i in editData) {
        editData[i] = result[i] || ''
      }
    })
  }
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name: 'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{name: 'pack'}">礼包管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ editData.id ? '编辑' : '新增' }}礼包</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-form :model="editData" label-position="left" :rules="rule" label-width="100px" ref="form" class="form-data">
    <el-form-item label="礼包名称" prop="name">
      <el-input v-model="editData.name" placeholder="请输入礼包名称" clearable/>
    </el-form-item>
    <el-form-item label="礼包价值" prop="prices">
      <el-input v-model="editData.price" placeholder="请输入礼包价格" clearable>
        <template #append>元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="可领取数">
      <el-input-number v-model="editData.change_number" :min="1" clearable>
<!--        <template #append>元</template>-->
      </el-input-number>
    </el-form-item>
    <el-form-item label="礼包图片" prop="image">
      <upload-component :upload-path="`${apiUrl}upload/product_image`"
                        file_name="product" :show-file-list="false" @upload-success="upload_success"
                        rule="^(image)\/.+$"
                        :imageUrl="editData.image" :upload-id="{file_name:'product'}" image-cls="vea-upload-max220"
                        tips="建议尺寸：700*450"/>
    </el-form-item>
    <el-form-item label="礼包详情" prop="content">
      <editor-component :content="editData.content" @editor="updateCont"/>
    </el-form-item>

    <el-form-item label="礼包规格">
      <!--        <el-input v-model="editData.attr" placeholder="请输入礼包规格" clearable/>-->
      <el-button link type="primary" @click="addAttr">添加规格</el-button>
    </el-form-item>
    <el-form-item>
      <el-table :data="editData.productAttr" border size="small">
        <el-table-column prop="name" label="名称">
          <template #default="{row}">
            <el-input v-model="row.name" placeholder="请输入礼包规格名称" clearable/>
          </template>
        </el-table-column>
        <el-table-column prop="prices" label="价值">
          <template #default="{row}">
            <el-input v-model="row.prices" placeholder="请输入礼包规格价值" clearable/>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="SKU">
          <template #default="{row}">
            <el-input v-model="row.sku" placeholder="请输入礼包规格SKU" clearable/>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="可领取数量">
          <template #default="{row}">
            <el-input-number v-model="row.change_number" :min="1" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="danger" icon="delete" size="small" link circle
                       @click="editData.productAttr.splice(editData.productAttr.indexOf(row),1)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :loading="loading" round @click="savePack(form)" class="edit-btn">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
